<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="column-app">
    <div v-show="show.list" class="row">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-default" @click="getList">刷新</a>
                    </td>
                </tr>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>时间</th>
                    <th>订阅数(实际/运营)</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in list">
                    <td>{{item.column_id}}</td>
                    <td>{{item.column_title}}</td>
                    <td>{{item.column_createtime ? (new Date(item.column_createtime*1000).toLocaleString()) : ''}}</td>
                    <td>{{item.num_subscribed}} / {{item.feed}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" v-if="0 == item.column_status" @click="shift(item, i)">下架</a>
                        <a class="btn btn-success btn-xs" v-if="1 == item.column_status" @click="shift(item, i)">上架</a>

                        <a v-if="item.column_status==0" class="btn btn-info btn-xs" @click="positionAdd(item)">内容推荐</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <pagination :limit="page.limit" :offset="page.offset" :total="total" @turn="turnPage"></pagination>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!--编辑-->
    <div class="row" v-show="show.edit">
        <div class="col-md-12">
            <div class="box-header">
                <h3>{{show.title}}</h3>
            </div>
            <div class="box-body">
                <div class="form-group" >
                    <label>订阅数：</label>
                    <input class="form-control" v-model="edit_item.feed">
                </div>
            </div>
            <div class="box-footer">
                <button type="button" class="btn btn-primary pull-right" @click="save()">保存</button>
                <button type="button" class="btn btn-default pull-left" @click="show.edit=false;show.list=true">取消</button>
            </div>
        </div>
    </div>
    <!--编辑 /-->

    <!--内容推荐-->
    <div class="row" v-show="show.position">
        <div class="box-header">
            <h3>内容推荐</h3>
        </div>
        <div class="box-body">
            <position-add v-model="positionData" :item_type="4" item_url="/specialColumn/detail/" ref="positionModal"></position-add>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-primary pull-right" @click="positionSave()">推荐</button>
            <button type="button" class="btn btn-default pull-left" @click="show.position=false;show.list=true">取消</button>
        </div>
    </div>
    <!--内容推荐 /-->
</section>
<!-- /.content -->

<script>
    var column_app = new Vue({
        el: '#column-app',
        data: {
            list: [],
            edit_item: {},
            teachers: [],
            page: {
                limit: 10,
                offset: 0,
                teacher_id: 0
            },
            total: 0,
            show: {
                list: true,
                edit: false,
                title: '',
                position: false
            },
            positionData: {},
        },
        created: function () {
            this.getList();
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/column',
                    type: 'GET',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.list;
                        this.total = resp.total;
                    }.bind(this)
                });
            },
            getTeachers: function () {
                ajax({
                    uri: '/common/teacher_names',
                    success: function(resp) {
                        this.teachers = resp.data;
                    }.bind(this)
                })
            },
            shift: function (item,i) {
                var on = 0==item.column_status ? 0 : 1;
                ajax({
                    uri: '/column',
                    type: 'DELETE',
                    data: {id: item.column_id, on: on},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },

            // 编辑
            edit: function (item) {
                this.edit_item = item;
                this.show.list = false;
                this.show.edit = true;
                this.show.title = '编辑';
            },
            // 保存
            save: function () {
                let self = this;
                ajax({
                    uri: '/column/save',
                    data: self.edit_item,
                    success: function (resp) {
                        this.show.edit = false;
                        this.show.list = true;
                        this.getList();
                    }.bind(this)
                })
            },

            // 内容推荐
            positionOpen: function (item) {
                let self = this;
                this.positionData = {
                    itemId: item.column_id,
                    itemTitle: item.column_title,
                    itemImg: JSON.parse(item.covers).list
                };

                positionIndex = layer.open({
                    type: 1,
                    title: '内容推荐',
                    closeBtn: 1,
                    shadeClose: false,
                    content: $('#position-box'),
                    resize: false,
                    area: ['520px'],
                    success: function (i) {
                        console.log(i);
                        self.$refs.positionNews.loadData(self.positionData);
                        $('.layui-layer-content').css('height', 'auto');
                    }
                });
            },

            /* 内容推荐 */
            positionAdd: function (item) {
                let self = this;
                this.positionData = {
                    itemId: item.column_id,
                    itemTitle: item.column_title,
                    itemImg: JSON.parse(item.covers).list
                };

                this.show.list = false;
                self.show.position = true;
                setTimeout(function () {
                    self.$refs.positionModal.loadData(self.positionData);
                }, 50);
            },
            positionSave: function () {
                let self = this;
                self.$refs.positionModal.save(function () {
                    self.show.list = true;
                    self.show.position = false;
                });
            }
            /* 内容推荐 end */
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>